<template>
  <div>
    <div class="header">
      <div>线上热门搜索</div>
      <div class="btn-group">
        <el-button-group>
          <el-button type="primary" size="mini">全部渠道</el-button>
          <el-button type="default" size="mini">线上</el-button>
          <el-button type="default" size="mini">门店</el-button>
        </el-button-group>
      </div>
    </div>
    <!-- main chart -->
    <div class="chartDom" ref="chartDom"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let myChart = echarts.init(this.$refs.chartDom);
      let option = {
        legend: {
          top: "bottom",
        },

        title: {
          text: "搜索引擎",
        },

        tooltip: {
          show: true,
        },

        avoidLabelOverLap: false,

        // 定义饼状图的引导线
        labelLine: {
          show: true, // 让环形引导线不展示
          length: 10, //引导线第一段长度
          length2: 10, //引导线第二段长度
          lineStyle: {
            color: "#9fceff", //引导线颜色
          },
        },

        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "全部渠道",
            type: "pie",
            radius: [50, 140],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 2,
            },
            data: [
              { value: 40, name: "搜索引擎" },
              { value: 38, name: "视频广告" },
              { value: 32, name: "联盟广告" },
              { value: 30, name: "抖音推广" },
              { value: 28, name: "淘宝推广" },
              { value: 26, name: "官网访问" },
            ],

            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 30px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(201, 201, 201, 0.3);
}

.chartDom {
  height: 380px;
  width: 100%;
}
</style>